<%layout("/common/g_layout.html"){%>

<div class="container-fluid content" name="top">
    <div class="row">
        <div class="col-md-7 left">
            <!-- <hr> -->
            <div class="title">
                <img class="teamicon" src="${group.imageurl}" width="65" height="65" alt="小组图标" title="小组图标">
                <span class="team-name">${group.name}</span>
                <!-- <button type="button">加入小组/推出小组</button> -->
                <%if(isGroups=="0"){%>
                <button type="button" class="btn btn-success btn-sm" id="join-or-leave" data-userid="6" data-groupid=${group.id}>
                    <span class="glyphicon glyphicon-star star"></span> <span class="text">申请加入小组</span>
                </button>
                <%}%>
                <%if(isGroups=="1"){%>
                <button type="button" class="btn btn-success btn-sm" disabled id="join-or-leave" data-userid="6" data-groupid=${group.id}>
                    <span class="glyphicon glyphicon-star star"></span> <span class="text">你已加入小组</span>
                </button>
                <%}%>
            </div>
            <div class="team-intro">
                <div class="team-setup">
                    创建于：<span class="time">${printTime(group.group_time)}</span> 组长：
                    <span class="leader"><a href="" title="${username}">${username}</a></span>
                </div>
                <div class="team-detail">
                    ${group.description}
                </div>
                <div class="team-tag">
                    <ul>
                        <li style="color: black;background: #fff4e8">小组标签</li>
                        <li><a href="" title="">日语</a></li>
                        <li><a href="" title="">自学日语</a></li>
                        <li><a href="" title="">日本语</a></li>
                        <li><a href="" title="">日本</a></li>
                        <li><a href="" title="">自学</a></li>
                        <li><a href="" title="">外语</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-md-offset-1 right th-guess">
            <div class="title-right">猜你喜欢的小组</div>
            <%
            for (g in hotGroup){
            %>
            <!--${g.imageurl}-->
            <div>
                <div><img src="../images/head1.png" class="img-circle" height="60" width="60" alt=""></div>
              <span class="team-name-and-members">
                <span class="team-name">${g.name}</span>
              <br>
              <br><span class="team-members">${g.num}位成员</span>
              </span>
                <button type="button" class="btn btn-default btn-sm th-join" id="join-team" data-groupid="${g.id}">
                    <span class="glyphicon glyphicon-plus"></span>加入小组
                </button>
            </div>
            <%}%>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 hot-topics">
            <div role="tabpanel">
                <!-- Nav tabs -->
                <ul class="breadcrumb" role="tablist" id="myTab">
                    <li role="presentation" class="active"><a href="#latest-topic" aria-controls="latest-topic" role="tab" data-toggle="tab">最新话题</a></li>
                    <li role="presentation"><a href="#hottest-topic" aria-controls="hottest-topic" role="tab" data-toggle="tab">最热话题</a></li>
                    <!-- <a href="#top"> -->
                    <button type="button" class="btn btn-default btn-success pull-right" id="say-something">
                        <span class="glyphicon glyphicon-pencil"></span>发言
                    </button>
                    <!-- </a> -->
                </ul>
                <div class="clear-fix"></div>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="latest-topic">
                        <%
                        for(topic in topics.list){
                        %>
                        <div class="topic-list">
                            <div class="topic-theme"><a href="/topic/goTopic?id=${topic.id}"><span class="tit">${topic.name}</span></a><span class="post-author">${topic.author_id}</span><span class="res-count">${topic.commentnum}回应</span><span class="post-time">${printTime(topic.update_time)}</span></div>
                            <div class="topic-summary">
                                <p class="post-content">${topic.topic_text}</p>
                            </div>
                            <div class="topic-thumb">
                                <div><img src="${topic.imgurl}" width="65" height="65" class="img-rounded" height="768" width="1366" alt=""></div>

                            </div>
                        </div>
                        <%}%>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="hottest-topic">
                        <%
                        for(topic in topicshot.list){
                        %>
                        <div class="topic-list">
                            <div class="topic-theme"><a href="/topic/goTopic?id=${topic.id}"><span class="tit">${topic.name}</span></a><span class="post-author">${topic.author_id}</span><span class="res-count">${topic.commentnum}回应</span><span class="post-time">${printTime(topic.update_time)}</span></div>
                            <div class="topic-summary">
                                <p class="post-content">${topic.topic_text}</p>
                            </div>
                            <div class="topic-thumb">
                                <div><img src="${topic.imgurl}" width="65" height="65" class="img-rounded" alt=""></div>

                            </div>
                        </div>
                        <%}%>

                    </div>
                    <!-- <div role="tabpanel" class="tab-pane" id="messages">0003</div> -->
                    <!-- <div role="tabpanel" class="tab-pane" id="settings">0004</div> -->
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            <!-- Pager -->
            <nav>
                <ul class="pagination th-page">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <%
                    var i=1;
                    while(true){
                    %>
                    <li><a href="#">${i}</a></li>
                    <%
                    i++;
                    if(i>topics.pager.pageCount){
                        break;
                    }
                    }
                    %>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 message-box" id="message-box">
            <form action="/topic/addTopics?page=1&group_id=${group.id}" method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-xs-4">
                        我也要发言
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-xs-6">
                        <label for="posted-title">标题</label>
                        <input type="text" name="name" class="form-control" id="posted-title" placeholder="标题内容">
                    </div>
                </div>
                <div class="form-group">
                    <label for="add-img">添加图片</label>
                    <input type="file" id="add-img" name="file">
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <textarea class="form-control" id="mess-content" name="topic_text" cols="100" rows="5"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4 action-button">
                        <input type="submit" value="发表" class="btn btn-success btn-lg">
                        <!--<button type="button" class="btn btn-success btn-lg" id="push">发表</button>-->
                        <button type="reset" class="btn btn-danger btn-lg">撤销</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<footer class="main-footer">
    <a href="#top" title="" class="pull-right">
        <button id="back-top" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
    </a>
    <div class="container">
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-2 footer-info">
                <h5 class="title">关于我们</h5>
                <div class="related-info">
                    <div class="col-md-6">
                        <p><a href="#">关于我们</a></p>
                        <p><a href="#">加入我们</a></p>
                        <p><a href="#">联系我们</a></p>
                        <p><a href="#">商务合作</a></p>
                    </div>
                    <div class="col-md-6">
                        <p><a href="#" title="帮助中心">帮助中心</a></p>
                        <p><a href="#" title="标签集合">标签集合</a></p>
                        <p><a href="#" title="收集工具">收集工具</a></p>
                        <p><a href="#" title="免责声明">免责声明</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 footer-info">
                <h5 class="title">手机应用</h5>
                <div class="related-info">
                    <div class="col-md-6">
                        <p><a href="#">关于我们</a></p>
                        <p><a href="#">加入我们</a></p>
                        <p><a href="#">联系我们</a></p>
                        <p><a href="#">商务合作</a></p>
                    </div>
                    <div class="col-md-6">
                        <p><a href="#" title="帮助中心">帮助中心</a></p>
                        <p><a href="#" title="标签集合">标签集合</a></p>
                        <p><a href="#" title="收集工具">收集工具</a></p>
                        <p><a href="#" title="免责声明">免责声明</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 footer-info">
                <!-- <h5 class="title">二维码</h5> -->
                <div class="related-info">
                    <img src="../images/erweima.jpg" height="100" width="100" alt="" class="img-rounded" style="margin-bottom: 10px">
                    <p>扫描二维码
                        <br>下载手机客户端</p>
                </div>
            </div>
            <div class="col-md-2 footer-info">
                <h5 class="title">关于我们</h5>
                <div class="related-info">
                    <div class="col-md-6">
                        <p><a href="#">新浪微博</a></p>
                        <p><a href="#">QQ空间</a></p>
                        <p><a href="#">腾讯微博</a></p>
                        <p><a href="#">人人网</a></p>
                    </div>
                    <div class="col-md-6">
                        <p><a href="#" title="微信">微信</a></p>
                        <p><a href="#" title="豆瓣">豆瓣</a></p>
                        <p><a href="#" title="知乎">知乎</a></p>
                        <p><a href="#" title="36Kr">36Kr</a></p>
                    </div>
                </div>
            </div>
            <div class="col-md-2 footer-info">
                <h5 class="title">友情链接</h5>
                <div class="related-info">
                    <div class="col-md-6">
                        <p><a href="#">淘宝网</a></p>
                        <p><a href="#">天猫商城</a></p>
                        <p><a href="#">京东商城</a></p>
                        <p><a href="#">亚马逊</a></p>
                    </div>
                    <div class="col-md-6">
                        <p><a href="#" title="当当">当当</a></p>
                        <p><a href="#" title="易趣网">易趣网</a></p>
                        <p><a href="#" title="易迅网">易迅网</a></p>
                        <p><a href="#" title="蘑菇街">蘑菇街</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</footer>
<div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <span>&copy;Copyright 2015 <a href="#">酷设联盟</a></span> |
                <span><a target="_blank" href="#">京ICP备11008151号</a></span> |
                <span>京公网安备11010802014853</span>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/group/js/scripts/jquery-2.1.3.min.js"></script>
<script src="/group/js/scripts/underscore.js"></script>
<script type="text/javascript" src="/group/js/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/group/js/scripts/nav.js"></script>
<script type="text/javascript" src="/group/js/scripts/tog.js"></script>
<script type="text/javascript" src="http://cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<script type="text/javascript">
    CKEDITOR.replace('topic_text');

</script>

<!--修改underscore的定界符-->
<script type="text/javascript">
    _.templateSettings = {
        interpolate: /\{<=([\s\S]+?)>\}/g,
        evaluate: /\{<([\s\S]+?)>\}/g,
        escape: /\{<-([\s\S]+?)>\}/g
    };
</script>

<script type="text/template" id="topic-time">
    {< getTime.forEach(function(topic) { >}
    <div class="topic-list">
        <div class="topic-theme">
            <a href="#">
                <span class="tit">{<= topic.name >}</span>
            </a>
            <span class="post-author">{<= topic.author_id >}</span>
            <span class="res-count">{<= topic.commentnum >}回应</span>
            <span class="post-time">{<= topic.update_time >}</span>
        </div>
        <div class="topic-summary">
            <p class="post-content">{<= topic.topic_text >}</p>
        </div>
        <div class="topic-thumb">
            <div>
                <img src={<= topic.imgurl >} width="65" height="65" class="img-rounded" height="768" width="1366" alt="">
            </div>
        </div>
    </div>
    {< }) >}
</script>

<script type="text/template" id="topic-hot">
    {< getHot.forEach(function(topic) { >}
    <div class="topic-list">
        <div class="topic-theme">
            <a href="#">
                <span class="tit">{<= topic.name >}</span>
            </a>
            <span class="post-author">{<= topic.author_id >}</span>
            <span class="res-count">{<= topic.commentnum >}回应</span>
            <span class="post-time">{<= topic.update_time >}</span>
        </div>
        <div class="topic-summary">
            <p class="post-content">{<= topic.topic_text >}</p>
        </div>
        <div class="topic-thumb">
            <div>
                <img src={<= topic.imgurl >} width="65" height="65" class="img-rounded" height="768" width="1366" alt="">
            </div>
        </div>
    </div>
    {< }) >}
</script>




<script type="text/javascript">
    $(function() {
        $("#say-something").click(function() {
            // $('div.message-box').show();
            $(window).scrollTop($(window).scrollTop() + 1000);
            $('div.message-box').find('#posted-title').focus();
        });

        $('#push').click(function() {
            $title = $('div.message-box').find('#posted-title').val();
            $content = $('div.message-box').find('textarea').getHtml();
            alert($content);
            var html = '<div class="topic-list"> <div class="topic-theme"><span class="tit">' + $title + '</span><span class="post-author">小胖</span><span class="res-count">6回应</span><span class="post-time">两分钟前</span></div> <div class="topic-summary"> <p class="post-content">' + $content + '</p> </div> <div class="topic-thumb"> <div><img src="../images/head1.png" class="img-circle" alt=""></div> <div><img src="../images/head1.png" class="img-circle" alt=""></div> <div><img src="../images/head1.png" class="img-circle" alt=""></div> </div> </div>';
            $('div#latest-topic').append(html);
            // $('div.message-box').hide();
        });
    });

</script>


<%}%>

